<script setup lang="ts">
import request from '../../../utils/request'
import { ref, watch } from 'vue'
import type { ArticleItem, ArticleResData } from '../../../types/news'
import { useNewsStore } from '../../../stores/news'
// const props = defineProps<{ activeId: number }>()
const store = useNewsStore()
const articles = ref<ArticleItem[]>([])
// 每次菜单点击，监听 id 变化，重新发请求获取当前点击菜单列表数据
watch(
  // 说明：只监听 props对象 中的 activeId 属性变化
  () => store.activeId,
  async () => {
    const res = await request.get<any, ArticleResData>(`/articles`, {
      params: {
        channel_id: store.activeId,
        timestamp: Date.now(),
      },
    })
    articles.value = res.results
  },
  // 默认执行一次监听,因为推荐列表数据默认加载的
  { immediate: true }
)
</script>

<template>
  <div class="article-list">
    <div class="article-item" v-for="item in articles" :key="item.art_id">
      <p class="title">{{ item.title }}</p>
      <img
        v-for="(src, i) in item.cover.images"
        :key="i"
        class="img"
        :src="src"
        alt=""
      />
      <div class="info">
        <span>{{ item.aut_name }}</span>
        <span>{{ item.comm_count }}评论</span>
        <span>{{ item.pubdate }}</span>
      </div>
    </div>
  </div>
</template>
